Vue.component("ly-login", {
    template: `
    <template>
         <el-dialog :visible.sync="show.open" width="400px" :title="show.text">
            <el-form ref="form" :model="form" label-width="80px">
                <template v-if="show.path!='setpwd'">
                  <el-form-item label="账号:">
                    <el-input v-model="form.name" :placeholder="namePh || '你的中文名'"></el-input>
                  </el-form-item>
                  <el-form-item label="密码:">
                    <el-input v-model="form.pwd" type="password" :placeholder="namePh || '默认密码123456'">></el-input>
                  </el-form-item>
                </template>
                <template v-else>
                    <el-form-item label="原密码:">
                        <el-input v-model="form.pwd" type="password"></el-input>
                    </el-form-item>
                    <el-form-item label="新密码:">
                        <el-input v-model="form.newpwd" type="password"></el-input>
                    </el-form-item>
                </template>
                <el-form-item v-if="show.path!='login'" label="确认密码:">
                    <el-input v-model="form.repwd" type="password"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" style="text-align: right">
                <el-link v-if="show.path=='login'" style="margin-right: 10px">忘记密码</el-link>
                <el-button type="primary" @click="op" :disabled="show.dis">{{show.text}}</el-button>
                <el-button @click="show.open=false">取消</el-button>
            </div>
        </el-dialog>
    </template>
    `,
    props: ["namePh", "pwdPh"],
    data() {
        return {
            user: null,
            form: {},
            show: {open: false, dis: false, text: null, path: null},
        }
    },
    created() {
        axios.get("/login/myinfo").then(res => {
            this.user = res.data.code ? res.data.data : null;
            if (this.user) {
                this.$emit("change", this.user);
            }
        });
    },
    methods: {
        op() {
            this.show.dis = true;
            axios.post("/login/" + this.show.path, usp(this.form))
                .then(res => {
                    this.show.dis = false;
                    if (res.data.code) {
                        this.show.open = false;
                        this.$message(res.data.msg);
                        this.user = res.data.data;
                        this.$emit("change", this.user);
                    } else {
                        this.$alert(res.data.msg);
                    }
                }).catch(() => {
                this.$alert("系统异常, 请联系管理员!");
                this.show.dis = false;
            });
        },
        logout() {
            axios.get("/login/logout").then(res => {
                if (res.data.code) {
                    this.user = null;
                    this.$message(res.data.msg);
                    this.$emit("change", null);
                } else {
                    this.$alert(res.data.msg);
                }
            });
        },
        showDialog(text, path) {
            this.form = {};
            this.show.text = text;
            this.show.path = path;
            this.show.dis = false;
            this.show.open = true;
        },
        showLogin() {
            this.showDialog('登录', "login");
        },
        showReg() {
            this.showDialog('注册', "reg");
        },
        showReset() {
            this.showDialog('修改密码', "setpwd");
        },
        islogin() {
            return this.user;
        },
        isadmin() {
            return this.user && this.user.role == 0;
        },
        isme(uid) {
            return this.user && this.user.id == uid;
        },
        can(uid) {
            return this.isme(uid) || this.isadmin();
        }
    }
})